<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>千锋选课系统</title>
    <style type="text/css">
        select {
            width: 200px;
            height: 350px;
        }

        input {
            position: absolute;
            width: 100px;
            margin-left: -150px;
        }
    </style>
</head>

<body>
    <center>
        <fieldset style="width:800px;">
            <legend>请选择课程</legend>
            <br>
            <select id="leftSelect" multiple="multiple" size="23" style="margin-right:200px;" ondblclick="right();">
                <option>职场新动力英语1</option>
                <option>职场新动力英语2</option>
                <option>职场新动力英语3</option>
                <option>职场新动力数学1</option>
                <option>职场新动力数学2</option>
                <option>职场新动力数学3</option>
                <option>计算机基础</option>
                <option>网页设计</option>
                <option>C语言程序设计</option>
                <option>vue</option>
                <option>react</option>
                <option>uni-app</option>
                <option>node.js/CMS案例</option>
                <option>数据结构与算法</option>
                <option>小程序/计算机视觉/Mybatis</option>
                <option>springMVC/SSH/WebService</option>
                <option>项目实训1</option>
                <option>项目实训2</option>
                <option>项目实训3</option
            </select>
                <input type="button" value="→ 添加 →" style="margin-top:50px;" onclick="right();">
                <input type="button" value="← 删除 ←" style="margin-top:100px;" onclick="left();">
                <input type="button" value="↑ 上移 ↑" style="margin-top:150px;" onclick="up();">
                <input type="button" value="↓ 下移 ↓" style="margin-top:200px;" onclick="down();">
                <input type="button" value="取消左选" style="margin-top:250px;" onclick="cancelLeft();">
                <input type="button" value="取消右选" style="margin-top:300px;" onclick="cancelRight();">

                <select id="rightSelect" multiple="multiple" size="23" ondblclick="left();" onclick="cancelLeft();">
                </select>
                <br>
                <br>
        </fieldset>
    </center>

    <script>
        var leftselect = document.getElementById('leftSelect');
        var rightselect = document.getElementById('rightSelect');

        console.log(leftselect.options); // 获取select框所有的选项 


        function right(){
            for(var i = 0;i < leftselect.options.length;i++){
                if(leftselect.options[i].selected){
                    rightselect.appendChild(leftselect.options[i]);
                    i--;
                }
            }
        }
        function left(){
            for(var i = 0;i < rightselect.options.length;i++){
                if(rightselect.options[i].selected){
                    leftselect.appendChild(rightselect.options[i]);
                    i--;
                }
            }
        }
        function up(){
            for(var i = 0;i < leftselect.options.length;i++){
                if(leftselect.options[i].selected){
                    if(i == 0){return};
                    leftselect.insertBefore(leftselect.options[i],leftselect.options[i].previousElementSibling)
                }
            }
        }

        function down(){
            for(var i = 0;i < leftselect.options.length;i++){

                if(leftselect.options[i].selected){

                    if(i == leftselect.options.length - 1){return};
                    leftselect.insertBefore(leftselect.options[i].nextElementSibling,leftselect.options[i]);
                    // break;
                }
                // break;
            }
        }
        
        function cancelLeft(){
            for(var i = 0;i < leftselect.options.length;i++){
                if(leftselect.options[i].selected){
                    leftselect.options[i].selected = false;
                }
            }
        }
        function cancelRight(){
            for(var i = 0;i < rightselect.options.length;i++){
                if(rightselect.options[i].selected){
                    rightselect.options[i].selected = false;
                }
            }
        }

    </script>
</body>

</html>